<!--
* @description 永恒之塔资料库
* @fileName index.vue
* @author huangyu
* @date 2022/05/19 11:22:07
!-->
<template>
    <div class="aionContainer" :style="{height:menuHeight+'px'}">
        <div class="aionTitle"> 喵喵达人 。永恒驿站</div>
        <div class="longjie" @click="clickLongJie"></div>
        <div class="aionMenu">
            <el-row>
                <el-col :span="6">
                    <el-button type="warning" @click="clickDataList" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">资料数据库</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="warning" @click="clickTZList" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">套装数据库</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="warning" @click="clickCompare" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">装备比较功能</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="warning" @click="clickSimulator(3)" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">人物属性模拟器</el-button>
                </el-col>
                
            </el-row>
            <el-row style="margin-top:20px;">
                <el-col :span="6">
                    <el-button type="warning" @click="clickGMM" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">GMM数据查询</el-button>
                </el-col>
                <el-col :span="6">
                    <a href="http://hysnail.gitee.io/aion/#/game/aion/gmmCount"><el-button type="warning">GMM大数据账号分析</el-button></a>
                </el-col>
                <el-col :span="6">
                    <el-button type="danger" @click="clickPeiFang" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">450~499图纸配方</el-button>
                </el-col>
            </el-row>

            <el-row style="margin-top:20px;">
                <el-col :span="6">
                    <el-button type="success" @click="clickMsg" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">留言板</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="info" plain @click="clickLog" v-wave="{initialOpacity: 0.5,duration: 0.5,easing: 'ease-in'}">开发日志</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="aionMain">
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerMain" size="70%" append-to-body>
                <vDataList></vDataList>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerTZList" size="50%" append-to-body>
                <vTZList></vTZList>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerCompare" size="70%" append-to-body>
                <vCompare></vCompare>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerSimulator" size="90%" append-to-body>
                <vSimulator></vSimulator>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerGMM" size="70%" append-to-body>
                <vGmm></vGmm>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerLog" size="50%" append-to-body>
                <vLog></vLog>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerMsg" size="30%" append-to-body>
                <vMsg></vMsg>
            </el-drawer>
            <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerPeiFang" size="60%" append-to-body>
                <vPeiFang></vPeiFang>
            </el-drawer>
        </div>
        <!-- <audio controls autoplay>
            <source src="/aion/music/aion.mp3" type="audio/mpeg" />
        </audio> -->

        <el-drawer direction="rtl" :with-header="false" :visible.sync="drawerLongJie" size="50%" append-to-body>
            <vLongJie></vLongJie>
        </el-drawer>
    </div>
</template>

<script>
import '@/assets/less/aion.less'
import vDataList from "./data.vue"
import vTZList from "./tzList.vue"
import vCompare from "./compare.vue"
import vSimulator from "./simulator.vue"
import vGmm from "./gmm.vue"
import vLog from "./log.vue"
import vMsg from "./message.vue"
import vLongJie from "./longjie.vue"
import vPeiFang from "./peifang.vue"
export default {
    components: {vDataList,vTZList,vCompare,vSimulator,vGmm,vLog,vMsg,vLongJie,vPeiFang},
    data() {
        return {
            menuHeight: document.documentElement.clientHeight,
            menuWidth: document.documentElement.clientWidth,
            drawerMain: false,
            drawerTZList: false,
            drawerCompare: false,
            drawerSimulator: false,
            drawerGMM: false,
            drawerLog: false,
            drawerMsg: false,
            drawerLongJie: false,
            drawerPeiFang: false,
        }
    },
    mounted() {
    },
    methods: {
        clickDataList(){
            this.drawerMain = true
        },
        clickCompare(){
            this.drawerCompare = true
        },
        clickSimulator(){
            this.drawerSimulator = true
        },
        clickTZList(){
            this.drawerTZList = true
        },
        clickGMM(){
            this.drawerGMM = true
        },
        clickLog(){
            this.drawerLog = true
        },
        clickMsg(){
            this.drawerMsg = true
        },
        clickLongJie(){
            this.drawerLongJie = true
        },
        clickPeiFang(){
            this.drawerPeiFang = true
        },
    },
}
</script>

<style scoped>

</style>